<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>添加地址</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link type="text/css" href="../../css/mui.picker.css" rel="stylesheet"/>
    <link type="text/css" href="../../css/mui.poppicker.css" rel="stylesheet"/>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/style.css" /> -->
    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        header.aui-bar {
            background: #fff;
        }

        .aui-title {
            color: #000;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #327afa !important;
        }

        .active {
            color: #327afa !important;
        }

        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        /*.send {
            font-size: 12px !important;
        }*/

        .aui-list-view:after {
            border: none;
        }

        .aui-switch.aui-switch-success:checked {
            border-color: #327afa;
            box-shadow: #327afa 0 0 0 26px inset;
            background-color: #327afa;
        }

        .menuRgiht {
            float: right;
            margin-right: 20px;
        }

        input[type="text"] {
            border: none;
            margin: 0;
            width: 70%;
            padding: 0;
        }

        textarea {
            margin: 0;
            height: 80px;
            overflow-y: auto;
            border: none;
            padding: 0;
        }

        .form-label {
            color: #666;
        }
    </style>
</head>
<body>
<!-- <header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        添加地址
    </div>
    <div class="aui-pull-right aui-iconfont send" onclick="addressAdd()">保存</div>
</header> -->

<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        添加地址
    </div>
    <a class="aui-pull-right send" style="padding-left: 10px;color:#000;" onclick="addressAdd()">保存</a>
</header>

<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <span class="form-label">收货人:</span>
            <span><input type="text" name="truename" id="truename" placeholder="请输入收货人姓名"></span>
        </li>
        <li class="aui-list-view-cell">
            <span class="form-label">联系电话:</span>
            <span><input type="tel" name="mobile" id="mobile" placeholder="请输入收货人电话"
                         style="margin:0;display: inline-block;width: 70%;height:26px;line-height: 26px;border:none;"></span>
        </li>
        <li class="aui-list-view-cell" id="showCityPicker3">
            <a class="aui-arrow-right">
                <span class="form-label">所在地区</span>
                <span class="menuRgiht" id="checkCity">请选择</span>
            </a>
            <input type="hidden" name="city" id="city" value="">
            <input type="hidden" name="cityCode" id="cityCode" value="">
        </li>
        <li class="aui-list-view-cell">
            <textarea name="address" id="address" class="problemText" onblur="checkWord(this)"
                      placeholder="请写详细地址，不少于5个字"></textarea>
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-switch-body">
            <div class="aui-switch-title form-label">设为默认</div>
            <input type="checkbox" name="checkbox" id="checkbox" class="aui-switch aui-switch-success aui-pull-right"
                   checked>
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/city.data-3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/mui.picker.js"></script>
<script type="text/javascript" src="../../script/mui.poppicker.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        var header = $api.dom('header');
        $api.fixIos7Bar(header);

    }

    //保存地址
    function addressAdd() {
        mobile = document.getElementById('mobile').value;
        if (mobile == "") {
            api.toast({
                msg: "手机不能为空",
                duration: 2000,
                location: 'bottom'
            });

        } else {
            var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (!pattern.test(mobile)) {
                api.toast({
                    msg: "请输入正确号码"
                });

            } else {

                getStorageAll();
                var truename, mobile, city, cityCode, address, checkbox;
                truename = document.getElementById('truename').value;
                city = document.getElementById('city').value;
                cityCode = document.getElementById('cityCode').value;
                address = document.getElementById('address').value;
                checkbox = document.getElementById('checkbox').checked ? 'true' : 0;

                var data = {
                    userName: user_name,
                    trueName: truename,
                    mobile: mobile,
                    city: city,
                    cityCode: cityCode,
                    address: address,
                    checkbox: checkbox,
                };
                var url = 'User/addressAdd';
                ajaxRequest(url, 'post', data, function (ret, err) {
                    if (ret.status == 1) {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                        api.sendEvent({
                            name: 'addressAdd',
                            extra: {
                                key: 'true'
                            }
                        });
                        closeWin();
                    } else {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });

            }
        }
    }


    // 验证输入的地址是不是为空或者大于5
    function checkWord(obj) {
        var len = $(obj).val().length;
        var value = $(obj).val();
        if (len > 0) {
            if (len < 5) {
                api.toast({
                    msg: "字数少于5个字"
                })
            }
        } else {
            api.toast({
                msg: "不能为空"
            })
        }
    }
    // 验证手机号或者电话号码
    function checkPhone(obj) {
        var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
        if (!pattern.test($(obj).val())) {
            api.toast({
                msg: "请输入正确号码"
            });
            $(obj).val('')
        }
    }

    (function ($, doc) {
        $.init();
        $.ready(function () {
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            showCityPickerButton.addEventListener('tap', function (event) {
                // mask.show();
                showCityPickerButton.focus();
                cityPicker3.show(function (items) {
                    var city = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                    // 保存城市代码，修改时候设置默认值
                    var cityCode = items[0]["value"] + '-' + items[1]["value"] + '-' + items[2]["value"];
//                    $("#cityCode").val('222');
                    doc.getElementById('city').value = city;
                    doc.getElementById('cityCode').value = cityCode;
//                     alert(cityCode)
                    doc.getElementById('checkCity').innerText = city;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);

    $(function () {
        $('#mobile').unbind('change').bind('change', function () {
//            checkPhone(this);
        })
    });
</script>
</html>
